<template>
   <div class="hot-list">
       <p>热门城市</p>
       <ul>
           <li v-for="item of hotCity" :key="item" @click="handleChangeCity">
               {{item}}
           </li>
       </ul>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               hotCity:['北京','上海','深圳','重庆','西安','南京','杭州','成都','广州']
           }
       },
       methods: {
           handleChangeCity(event){
               /**获取所点击的城市名 */
               var cityName = event.target.innerText
               console.log(cityName)
               /** 组件通过dispatch派发事件changeCity,传递参数为城市名cityName */
               this.$store.dispatch('changeCity',cityName)
               /**修改仓库数据后跳页到首页 */
               this.$router.push('/home')
           }
       }
   }
</script>
   
<style scoped lang="less">
    .hot-list{
        padding: 0 .266667rem;
        p{
            font-size: .4rem;
            margin: .186667rem 0;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            background: white;
            li{
                list-style: none;
                width: 25%;
                height: 1.066667rem;
                line-height: 1.066667rem;
                font-size: .373333rem;
                text-align: center;
                border-bottom: 1px solid #ddd8ce;
                position: relative;
                border-right:1px solid #ddd8ce;
                box-sizing: border-box;
            }
            /* 4倍单元格--即去除每行最后一个单元格右边框 */
            & :nth-child(4n){
                border-right: none;
            }
        }
    }
</style>